<template>
	<div>
		<u-popup v-model="shareShow" :round="10" mode="bottom" @close="cancel(1)">
			<view class="share">
				<!-- <u-mask :show="true" class="flex-items-plus flex-row"> -->
				<text class="h3">邀请好友</text>
				<view class="share-list">
					<view class="ul">
						<!-- #ifdef APP-PLUS -->
						<view class="li" @click="share('weixin')">
							<image class="icon" src="../static/images/share/weixin2x.png"></image>
							<label class="label">微信</label>
						</view>
						<view class="li" @click="share('weixinpyq')">
							<image class="icon" src="../static/images/share/pyq.png"></image>
							<label class="label">朋友圈</label>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="li">
							<button open-type="share" @share='onShareAppMessage' :data-obj="wxShareData"
								class="share-button">
								<image class="icon" src="../static/images/share/weixin2x.png"></image>
								<label class="label">微信</label>
							</button>
						</view>
						<view class="li">
							<button open-type="share" @share='onShareTimeline' :data-obj="wxShareData"
								class="share-button">
								<image class="icon" src="../static/images/share/pyq.png"></image>
								<label class="label">朋友圈</label>
							</button>
						</view>
						<!-- <view class="li" @click="share('weixinpyq')">
							<image class="icon" src="../static/images/share/pyq.png"></image>
							<label class="label">朋友圈</label>
						</view> -->
						<!-- #endif -->
						<view class="li" @click="share('album')" v-if="album">
							<image class="icon" src="../static/images/share/album.png"></image>
							<label class="label">保存图片</label>
						</view>
						<view class="li" @click="share('lianjie')">
							<image class="icon" src="../static/images/share/lianjie.png"></image>
							<label class="label">链接</label>
						</view>
					</view>
				</view>
				<view class="btn-close" @click="cancel(1)">取消</view>
			</view>
		</u-popup>
		<u-popup v-model="wapShow" :round="10" mode="bottom" :border-radius="10" @close="cancel(2)">
			<view class="share-h5">
				<view class="text">
					点击浏览器下方
					<view class="icon">
						<u-icon name="list" color="#fff" size="28"></u-icon>
					</view>
					即可进行分享
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>

</script>

<script setup>
	// expose shareShow
	import ClipboardJS from "clipboard"
	import UImage from "../uni_modules/vk-uview-ui/components/u-image/u-image";
	import API from "../config/api";
	import {
		toRefs,
		defineProps,
		ref,
		onMounted,
		computed,
	} from "vue";
	import {
		onShareAppMessage
	} from "@dcloudio/uni-app";
	const props = defineProps({
		img: {
			type: String,
			default: ""
		},
		url: {
			type: String,
			dafault: ''
		},
		title: {
			type: String,
			dafault: ''
		},
		urlParms: {
			type: String,
			default: ''
		},
		album: {
			type: Boolean,
			default: false
		}
	})
	const {
		img,
		url,
		title,
		urlParms,
		album
	} = toRefs(props)
	const shareShow = ref(false)
	const wapShow = ref(false)
	const wxShareData = ref({})
	onMounted(() => {
		wxShareData.value = {
			title: title.value,
			imgUrl: img.value,
			path: url
		}
	})

	const longUrl = computed(() => {
		if (url.value.startsWith('pages'))
			return API.shareLink + '/#/' + url.value
		else if (url.value.startsWith('/pages'))
			return API.shareLink + '/#' + url.value
		else return url.value
	})
	const emit = defineEmits(['shareCancel'])
	// const handleShareWeiXin=(res)=>{
	// 	emit('shareWeiXin',res)
	// }
	function cancel(key) {
		if (key === 1) {
			shareShow.value = false
			emit('shareCancel')
		} else if (key === 2) {
			wapShow.value = false
		}
	}

	function wxShare(type) {
		// #ifdef APP-PLUS
		uni.share({
			provider: "weixin",
			type: 0,
			title: title.value,
			scene: type, //WXSceneSession会话 WXSceneTimeline朋友圈
			imageUrl: img.value,
			href: longUrl.value,
			success: () => {},
			fail: (err) => {
				console.log("err", err)
			}
		})
		// #endif
		// #ifdef MP-WEIXIN
		//分享到微信
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 2,
			title: "邀请好友",
			imageUrl: img.value,
			href: longUrl.value,
			success: function(res) {
				console.log("success:" + JSON.stringify(res));
				_this.addShare();
			},
			fail: function(err) {
				console.log("fail:" + JSON.stringify(err));
			}
		});
		// #endif
	}
	/**
	 * 保存图片到本地
	 */
	const saveToAlbum = () => {
		// #ifdef APP-PLUS
		uni.downloadFile({
			url: img.value,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function() {
							uni.hideLoading()
							uni.showToast({
								title: "保存成功",
							});
						},
						fail: function() {
							uni.hideLoading()
							uni.showToast({
								title: "保存失败",
								icon: "none"
							});
						}
					});
				}
			}
		})
		// #endif
		// #ifdef MP-WEIXIN || MP-ALIPAY
		uni.getImageInfo({
			src: img.value,
			success: function(image) {
				uni.saveImageToPhotosAlbum({
					filePath: image.path,
					success: function() {
						uni.hideLoading()
						uni.showToast({
							title: '图片保存成功'
						});
					},
					fail: function() {
						uni.hideLoading()
						uni.showModal({
							title: '图片保存失败',
							content: '请确认是否已开启授权',
							confirmText: '开启授权',
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting[
													"scope.writePhotosAlbum"
												]) {
												uni.showToast({
													title: '授权成功，请重试哦~',
													icon: "none"
												});
											} else {
												uni.showToast({
													title: '请确定已打开保存权限',
													icon: "none"
												});
											}
										}
									})
								}
							}
						})
					},
				});
			},
			fail(err) {
				console.log(err, 'err报错999')
			}
		});
		// #endif
		// #ifdef H5
		var oA = document.createElement('a');
		oA.download = ''; // 设置下载的文件名，默认是’下载’
		oA.href = img.value;
		document.body.appendChild(oA);
		oA.click();
		oA.remove(); // 下载之后把创建的元素删除
		// #endif
	}
	const lianjie = () => {
		let link = title.value + longUrl.value
		// #ifdef MP-WEIXIN || MP-ALIPAY || APP-PLUS
		uni.setClipboardData({
			data: link,
			success: res => {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 2000 //时间
				});
			}
		})
		// #endif
		// #ifdef H5
		let result
		let textarea = document.createElement("textarea")
		textarea.value = link
		textarea.readOnly = "readOnly"
		document.body.appendChild(textarea)
		textarea.select() // 选中文本内容
		textarea.setSelectionRange(0, link.length) // 设置选定区的开始和结束点
		uni.showToast({
			title: '复制成功'
		})
		result = document.execCommand("copy") //将当前选中区复制到剪贴板
		textarea.remove()
		// #endif
	}

	function share(key) {
		switch (key) {
			case 'weixin':
				wxShare("WXSceneSession")
				break
			case 'weixinpyq':
				wxShare("WXSceneTimeline")
				break
			case 'qq':
				break
			case 'weibo':
				break
			case 'album':
				saveToAlbum()
				break
			case 'lianjie':
				lianjie()
				break
		}
	}
	defineExpose({
		shareShow
	})
</script>
<style lang="scss">
	.share {
		background-color: #F8F8F8;
		text-align: center;

		.h3 {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			padding: 30rpx 0;
			border-bottom: 2px solid #F0F0F0;
			display: block;
		}

		.share-list {
			padding: 40rpx 0 54rpx;

			.ul {
				display: flex;
				justify-content: space-around;

				.li {
					&::after {
						border: none;
					}

					.icon {
						display: block;
						width: 92rpx;
						height: 92rpx;
					}

					.label {
						padding-top: 22rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						color: #333333;
						display: block;
					}
				}
			}
		}

		.btn-close {
			background-color: #fff;
			padding: 30rpx 0;
			font-size: 26rpx;
			color: #333;
		}
	}

	.share-h5 {
		padding: 0 20rpx;
		display: flex;
		justify-content: center;

		.text {
			line-height: 100rpx;
			font-size: 30px;

			.icon {
				background-color: #333;
				border-radius: 50%;
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				margin: 0 10rpx;
			}
		}
	}

	.share-button::after {
		border: none;
	}
</style>